<template>
  <div class="order">
    <div class="order_header flex flex-start align-center">
      <div class="order_header_item">
        <el-checkbox v-model="allChecked" @change="toggleAllCheck" :disabled="!tableData || !tableData.length"
        ></el-checkbox>
      </div>
      <div class="order_header_item">商品信息</div>
      <div class="order_header_item">总金额</div>
      <div class="order_header_item">优惠金额</div>
      <div class="order_header_item">实付金额</div>
      <div class="order_header_item">收货人信息</div>
      <div class="order_header_item">订单状态</div>
      <div class="order_header_item">开票状态</div>
      <div class="order_header_item">操作</div>
    </div>
    <template v-if="tableData && tableData.length">
      <div v-for="(item, index) in tableData" :key="'order' + index" class="card" :class="{'is_open': item.collapse}">
        <div class="cell_header">
          <div class="text-ellipsis">
            <el-checkbox v-model="item.isCheck" :disabled="item.disabled" @change="toggleCheck"></el-checkbox>
          </div>
          <div class="text-ellipsis">订单编号：<span class="text-lightgray">{{ item.orderNo }}</span></div>
          <div class="text-ellipsis">下单时间：<span class="text-lightgray">{{ item.createTime }}</span></div>
          <div class="text-ellipsis">渠道：
            <el-tag size="small">{{ item.orderChannel | changeOrderChannel }}</el-tag>
          </div>
          <div class="text-ellipsis">商户：<span class="text-lightgray">{{ item.mchName }}</span></div>
          <div class="text-ellipsis">店铺：<span class="text-lightgray">{{ item.storeName }}</span></div>
          <div class="text-ellipsis">订单来源：
            <el-tag size="small">{{ item.orderSource | source }}</el-tag>
          </div>

          <i class="el-icon-arrow-right" @click="toggleCollapse(item)"></i>
        </div>
        <el-collapse-transition>
          <div class="order_cell" v-show="item.collapse">
            <div class="order_cell_item"></div>
            <div class="order_cell_item">
              <div class="goodsDetail" v-for="(childItem, childIndex) in item.goodsItemList"
                   :key="'goodItem' + childIndex"
              >
                <img :src="baseImgUrl + childItem.surfaceImg" v-if="childItem.surfaceImg"/>
                <span class="show_avator" v-else>无封面</span>
                <div class="padding_left_10">
                  <div class="text-ellipsis" :title="childItem.goodsName">{{ childItem.goodsName }}</div>
                  <div class="text-ellipsis">数量：{{ childItem.num }}</div>
                  <template v-if="childItem.goodsParams && childItem.goodsParams.length">
                    <div class="text-ellipsis" v-for="(items, index) in childItem.goodsParams" :key="index">
                      {{ items.property }}：{{ items.propertyValue }}
                    </div>
                  </template>
                  <div class="text-ellipsis">单价：¥{{ childItem.price | nomoney }}</div>
                </div>
              </div>
            </div>
            <div class="order_cell_item">
              <div class="font-size--sm text-ellipsis" :title="'总金额：￥' + item.totalMoney.toFixed(2)">
                总金额：￥{{ item.totalMoney | nomoney }}
              </div>
            </div>
            <div class="order_cell_item">
              <div class="font-size--sm text-ellipsis" :title="'优惠券：' + item.couponMoney.toFixed(2)">
                <span>优惠券：</span>
                <span>{{ item.couponMoney | nomoney }}</span>
              </div>
            </div>
            <div class="order_cell_item">
              <div class="font-size--sm text-ellipsis" v-if="!(item.status == 1 || item.status == 9)"
                   :title="'实付金额：￥' + item.payMoney.toFixed(2)"
              >实付金额：￥{{ item.payMoney | nomoney }}
              </div>
            </div>
            <div class="order_cell_item">
              <template v-if="item.addressList && item.addressList.length">
                <div v-for="(addItem, addIndex) in item.addressList" :key="'address' + addIndex" class="address_item">
                  <div>
                    <span>姓名：</span>
                    <span class="text-ellipsis" :title="addItem.consigneeName">{{ addItem.consigneeName }}</span>
                  </div>
                  <div>
                    <span>手机号：</span>
                    <span class="text-ellipsis" :title="addItem.consigneePhone">{{ addItem.consigneePhone }}</span>
                  </div>
                  <div>
                    <span>地址：</span>
                    <span class="text-ellipsis" :title="addItem.fullAddress">{{ addItem.fullAddress }}</span>
                  </div>
                </div>
              </template>
              <div v-else>暂无地址</div>
            </div>
            <div class="order_cell_item">
              <div>
                <el-tag type="danger" v-if="item.status == 1">待付款</el-tag>
                <el-tag type="warning" v-else-if="item.status == 2">已付款</el-tag>
                <el-tag type="warning" v-else-if="item.status == 3">部分发货</el-tag>
                <el-tag type="success" v-else-if="item.status == 4">已发货</el-tag>
                <el-tag type="success" v-else-if="item.status == 5">已送达</el-tag>
                <el-tag type="success" v-else-if="item.status == 6">已签收</el-tag>
                <el-tag type="danger" v-else-if="item.status == 7">已退款</el-tag>
                <el-tag v-else-if="item.status == 8">已完成</el-tag>
                <el-tag type="info" v-else-if="item.status == 9">已取消</el-tag>
              </div>
              <div class="margin_top_10" v-if="item.returnMoney"><span class="text-lightgray">有退款</span></div>
            </div>


            <div class="order_cell_item">
              <button class="my-btn my-btn--mini my-btn--primary text text-lightgray">
                {{ item.openInvoiceStatus|changeInvoiceStatus }}
              </button>
            </div>

            <div class="order_cell_item">
              <button class="my-btn my-btn--mini my-btn--primary plain" @click="goDetail(item.id, item.orderType)">
                查看详情
              </button>
              <button class="my-btn my-btn--mini my-btn--primary plain" @click="showExpress(item)">查看物流</button>
              <!-- <button class="my-btn my-btn--mini my-btn--primary plain" v-if="item.orderInvoice">查看发票</button> -->
              <!--                        <button class="my-btn my-btn&#45;&#45;mini my-btn&#45;&#45;primary text text-lightgray" v-if="item.orderInvoice">已开票</button>-->
              <!--                        <button class="my-btn my-btn&#45;&#45;mini my-btn&#45;&#45;primary text text-lightgray" >{{item.openInvoiceStatus|changeInvoiceStatus}}</button>-->
            </div>
          </div>
        </el-collapse-transition>
      </div>

    </template>
    <div v-else class="text-center text-gray no_data">暂无数据</div>

    <order-express :visible.sync="isShowExpress" :express-no="showExpressNo"></order-express>
  </div>
</template>

<script>
import OrderExpress from '@/views/order-management/components/express'

export default {
  components: {
    OrderExpress
  },
  data() {
    return {
      isShowExpress: false,
      showExpressNo: '',
      allChecked: false,
      baseImgUrl: process.env.VUE_APP_FILE_URL + '/'
    }
  },
  props: ['tableData'],
  filters: {
    changeOrderChannel(val) {
      if (val == 1) {
        return '云裳严选'
      } else if (val == 2) {
        return '洗e先生'
      } else if (val == 3) {
        return '三翼鸟阳台'
      } else {
        return '----'
      }
    },
    source(val) {
      if (val == 1) {
        return '小程序'
      } else if (val == 2) {
        return 'pc端'
      } else if (val == 3) {
        return '移动端app'
      } else if (val == 4) {
        return '移动端web'
      } else if (val == 5) {
        return '屏端app'
      }
    },
    nomoney(val) {
      if (!val) {
        return '0.00'
      } else {
        return Number(val).toFixed(2)
      }
    },
    changeInvoiceStatus(val) {
      switch (val) {
        case 0:
          return '开票成功'
        case 1:
          return '校验不通过'
        case 2:
          return '审批中'
        case 3:
          return '审批不通过'
        case 4:
          return '开票中'
        case 5:
          return '开票失败'
        case 6:
          return '数据异常'
        default:
          return '---'
      }
    }
  },
  methods: {
    goDetail(rowId, rowType) {
      this.$router.push({
        name: 'OrderDetail',
        query: { id: rowId, type: rowType }
      })
    },
    toggleCollapse(rowData) {
      rowData.collapse = !rowData.collapse
      this.$emit('update:tableData', this.tableData)
    },
    showExpress(rowData) {
      let filters = rowData.goodsItemList.filter(item => item.expressNo)
      this.showExpressNo = filters[0] ? filters[0].expressNo : ''
      this.isShowExpress = true
    },
    toggleAllCheck(event) {
      this.tableData.forEach(element => {
        if (!element.disabled) {
          element.isCheck = event
        }
      })
      this.$emit('update:tableData', this.tableData)
      this.$emit('select', this.tableData.filter(item => item.isCheck))
    },
    toggleCheck(event) {
      this.$emit('update:tableData', this.tableData)
      this.$emit('select', this.tableData.filter(item => item.isCheck))
      this.allChecked = this.tableData.filter(item => !item.disabled).every(item => item.isCheck)
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  font-size: 14px;
  line-height: 23px;
  font-weight: 400;
  overflow: auto;
  background-color: white;

  .card {
    width: 100%;
    min-width: 1700px;
    border: 1px solid #dfe6ec;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .order_header {
    padding: 10px 0;
    color: rgb(153, 153, 153);
    // background: rgb(248, 250, 251);
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    min-width: 1510px;

    .order_header_item {
      flex: 1;
      display: inline-block;
      box-sizing: border-box;
      position: relative;
      vertical-align: middle;
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  .cell_header {
    width: 100%;
    min-width: 1700px;
    padding: 15px 10px;
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    background-color: #f5f7fa;
    border-bottom: 1px solid #dfe6ec;

    > div {
      flex: 1;
      display: inline-block;

      &:nth-child(1) {
        width: 55px;
        flex: 0 0 55px;
      }
    }

    > i {
      position: absolute;
      right: 10px;
      top: 50%;
      width: 14px;
      height: 14px;
      cursor: pointer;
      transform: translateY(-50%);
      transition: all .3s ease-in-out;
    }
  }

  .order_cell {
    display: flex;
    padding: 10px 0;
    min-width: 1700px;
    transition: all .3s ease-in-out;
    justify-content: flex-start;
    align-items: flex-start;

    &:hover {
      background-color: #f5f7fa;
    }

    .order_cell_item {
      flex: 1;
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  .is_open {
    .cell_header {
      > i {
        transform: translateY(-50%) rotateZ(90deg);
      }
    }
  }

  .no_data {
    padding: 30px;
  }

  .order_header_item,
  .order_cell_item {
    min-width: 100px;

    &:nth-child(1) {
      width: 40px;
      min-width: 40px;
      flex: 0 0 40px;
    }

    &:nth-child(2) {
      width: 320px;
      flex: 0 0 320px;
    }

    &:nth-child(3),
    &:nth-child(5),
    &:nth-child(7) {
      width: 150px;
      flex: 0 0 150px;
    }

    &:nth-child(4) {
      width: 140px;
      flex: 0 0 140px;
    }

    &:nth-child(6),
    &:nth-child(8) {
      width: 280px;
      flex: 0 0 280px;
    }
  }
}

.goodsDetail {
  width: calc(100% - 36px);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    vertical-align: middle;
  }

  > div {
    flex: 1;
    width: calc(100% - 64px);
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.address_item {
  > div {
    > span {
      display: inline-block;
      vertical-align: top;

      &:first-child {
        width: 4em;
      }

      &:last-child {
        width: calc(100% - 4.5em);
      }
    }
  }
}
</style>
